<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>resume</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
    <link rel="stylesheet" type="text/css" href="css/anime.css"/>
    <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
    <style>
			.title{
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.button {
				font-size: 18px;
				font-weight: normal;
				text-decoration: none;
				display: block;
				text-align: center;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				color: #FFF;
				background-color: #FFCC33;
				border: 1px solid #ECB100;
				padding: .5em 0em;
				margin: .5em .7em;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
		</style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide img123">
                 <img src="./img/bg1.jpg" alt="" class="img">
            </div>
            <div class="swiper-slide">
                  <img src="./img/2.jpg" alt="" class="img">
            </div>
            <div class="swiper-slide slide3">
				<div class="tou1">
					<img src="img/tou.png" alt="" class="img5">	
					<button id="enter"></button>
				</div>
				<img src="img/bg.png" alt="" class="img4">
				<div class="foot1">
					<img src="img/foot.png" alt="">
				</div>
                
            </div>
        </div>
    </div>
    <div id="mainContainer" style="margin-top: 30px;">
        <header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">个人简历</h1>
		</header>

       <div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<div id="head">
					<p>软件技能</p> 
				</div>
				<div id="box1">
					<img src="img/cdr.png" alt="">
					<span id="span1">60</span>
				</div>
				<div id="box2">
					<img src="img/ai.png" alt="">
					<span id="span2">60</span>
				</div>
				<div id="box3">
					<img src="img/office.png" alt="">
					<span id="span3">60</span>
				</div>
				<div id="box4">
					<img src="img/ps.png" alt="">
					<span id="span4">60</span>
				</div>
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div id="head">
					<p>工作经历</p> 
				</div>
				<div class="plane">
					<img src="img/work.png" alt="" class="work11">
				</div>
				<div class="plane1">
					<img src="img/plane.png" alt="" class="plane11">
				</div>
				<span id="work1">
					2015-2016<br>
					千峰培训
				</span>
				<span id="work2">
					2015-2016<br>
					千峰培训
				</span>
				<span id="work3">
					2016-2017<br>
					千峰培训
				</span>
				<span id="work4">
					2016-2017<br>
					千峰培训
				</span>
			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<img src="img/pro.png" alt="" id='pro0'>
				<div id="xxx">
				<ul>
					<li class="pro1"></li>
					<li class="pro2"></li>
					<li class="pro3"></li>
				</ul>	
				</div>
							
			</div>
			<div id="tabbar-with-map" class="mui-control-content">
			<div class="button" onclick="clicked('barcode_scan.html',true,true)">扫一扫</div>	
			<ul class="mui-table-view" style="margin-top: 25px;">
		
			<li class="mui-table-view-cell">
					<a style="text-align: center;color: #FF3B30;">
						退出登录
					</a>
				</li>
			</ul>
			</div>
		</div>

        <div id="footer">
            <nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar" id="skill">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">技能</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat" id="work">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">工作</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">项目</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我</span>
			</a>
		</nav>
        </div>
    </div> 
    <script src="js/index.js"></script>
    <script src="js/mui.min.js">
    </script>
    <script>
    mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		var ele ;
	//自定义函数
	$.fn.extend({
	    rotate: function () {
	        ele = this ;
	        setInterval('singleRotate()',20);
	    }
	});
	//初始角度
	var degree = 0;
	//单次旋转
	function singleRotate() {
	    //一次增加50度
	    degree = degree + 50 * Math.PI / 180;
	    ele.css("transform","rotate("+degree+"deg)");
	}
	 $('.img4').rotate();
    </script>
   <script src="js/immersed.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>  